$(function() {
    let layer = layui.layer
    let total = 15 //总页数
    let query = {
        pagenum: 1, //默认第一页
        pagesize: 5, //一页几条数据
    }
    let arr = [`
                <div class="kr_news_date">
                  17 <span>08月</span>
                </div>
    `];


    function paging() {
        if (total !== 0 && arr.length >= total) {
            return layer.msg('没有更多数据了')
        }

        $.ajax({
            url: "http://localhost:8888/api/articles",
            data: query,
            success: function(res) {
                // console.log(res);
                res.data.forEach(item => {
                    arr.push(`
                <div class="item">
                <h4>
                    <a href="./detail.html?id=${item.id}">${item.title}</a>
                </h4>
                <p class="meta">
                    <span>15分钟前 分享至</span>
                    <a href="javascript:;" class="wechat"></a>
                    <a href="javascript:;" class="weibo"></a>
                </p>
                <p class="brief">${item.content}</p>
            </div>
                `)
                })
                $(".kr_news_list").html(arr.join(''))

            }
        })
    }
    paging()



    //更多数据
    $(".kr_more").click(function() {
        query.pagenum += 1
        paging()
    })
})